﻿var React = require('react');

var Regesiter = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var phone = this.refs.phone.value.trim();
        var validatecode = this.refs.validatecode.value.trim();
        var RegesiterData = { phone: phone, validatecode: validatecode, openid: this.props.initialData.openId };
        $.ajax({
            url: this.props.submitUrl,
            dataType: 'json',
            type: 'POST',
            data: RegesiterData,
            success: function (data) {
                if (data.success == false) {
                    $().toastmessage('showErrorToast', data.errormsg);
                }
                else {
                    var url = $("#returnurl").val();
                    window.location.href = 'http://' + window.location.host + '/' + url;
                }
            }.bind(this),
            error: function (xhr, status, err) {
                alert(err.toString());
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    CheckPhone: function (e) {
        var phone = document.getElementById("phone");

        if (phone.validity.patternMismatch == true)
            phone.setCustomValidity("手机号不正确！");
        else
            phone.setCustomValidity("");
    },
    CheckCode: function (e) {
        var code = document.getElementById("validatecode");
        var scode = document.getElementById("servervalidcode");
        if (code.value != scode.value)
            code.setCustomValidity("验证码不正确！");
        else
            code.setCustomValidity("");
    },
    componentDidMount: function () {
        $("#sendcode").click(function () {
            $(this).attr("disabled", "disabled");
            var phone = $("#phone").val().toString().trim();
            $.ajax({
                url: "/Payment/Sendcode?phone=" + phone,
                type: 'Get',
                dataType: 'text',
                success: function (data) {
                    $("#servervalidcode").val(data);
                }.bind(this),
                error: function (xhr, status, err) {
                    //alert(err.toString());
                    //console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
            var index = 60;
            var txt = "发送短信码";
            $('body').everyTime('1s', 'a', function () {
                //alert(index);
                if (index == 1) {
                    $("#sendcode").removeAttr("disabled");
                    $('body').stopTime('a');
                }
                index = index - 1;
                if (index == 0) {
                    $("#sendcode").text(txt);
                }
                else {
                    $("#sendcode").text(txt + "(" + index + ")");
                }

                ;
            });

        });
    },
    render: function () {
        return (
            <form onSubmit={this.handleSubmit} id="form">
                <div className="form-group" >
                    <label htmlFor="exampleInputEmail1">手机号</label>
                    <input type="text" required="required" onInput={this.CheckPhone} pattern="^1\d{10}$" className="form-control" id="phone" placeholder="手机号"  ref="phone"/>
                </div>
                <div className="form-group">
                    <div className="labelt">验证码</div>
                    <input type="text" required="required"  onInput={this.CheckCode}  className="form-control-own form-control" id="validatecode" placeholder="验证码"  ref="validatecode"/>
                    <button type="button" id="sendcode" className="form-control-own1 btn btn-success ">发送验证码</button>
                </div>
                <button type="submit"id="submitbutton" value="Post" className="btn btn-success btn-lg btn-block">提交</button>
            </form>
        );
    }
});

module.exports = Regesiter;